<template>
  <div id="app">
  <!-- <input type="text" v-focus placeholder="Focus on me">
  <input type="text" v-color="'red'"> -->
  <MyTable :listData="list">
    <template v-slot:myslot="obj">
      <button @click="deleteItem(obj.rowData.id)">删除{{ obj.msg }}</button>
    </template>
  </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'

export default {
  methods: {
    deleteItem(id) {
console.log(id)
      this.list = this.list.filter(i => i.id !== id)
    }
  },
  data () {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    }
  },
components: {
  MyTable
},



name: 'App',
 directives:{
  focus: {
    inserted(el) {
      el.focus();
    }
  },
  color:{
    bind(el,binding){
      el.style.color=binding.value;
    }
  }
 }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
